<template>
  <div class="w-10">
    <div class="flex f-57 tab-ct">
      <div :class="['flex-c tab-item',selectedIndex===0?'sel':'']" @click="changeTab(0)">待支付</div>
      <div :class="['flex-c tab-item',selectedIndex===1?'sel':'']" @click="changeTab(1)">支付完成</div>
    </div>
    <div class="f-48 items-ct" v-if="selectedIndex===0">
      <div v-for="(orderItem,index) in orderList" :key="index">
       <orderItem :isPay="true" :orderItem="orderItem" @delSuccess="delSuccess"></orderItem>
      </div>
      <div class="no-data" v-if="orderList.length<=0">暂无订单数据~</div>
    </div>
    <div class="f-48 items-ct" v-if="selectedIndex===1">
      <div v-for="(orderItem,index) in orderList" :key="index">
        <orderItem :isPay="false" :orderItem="orderItem" ></orderItem>
       </div>
       <div class="no-data" v-if="orderList.length<=0">暂无订单数据~</div>
    </div>
  </div>
</template>

<script>
import orderItem from '@/components/order/order-item.vue'
import { mixinParams } from '@/vmixin/vmixin'
import {getOrderListByStatus} from '@/service'
export default {
  data () {
    return {
      selectedIndex: 0,
      orderList: [], // 订单列表
      memberPhone: ''
    }
  },
  created () {
    console.log('this.order Type------------', this.orderType, this.$vux)
    this.selectedIndex = parseInt(this.orderType) || 0
    this.getOrderListByStatus()
  },
  mounted () {},
  filters: {
    // moneyFilter(){
    //     return "33"
    // }
  },
  mixins: [mixinParams],
  components: {
    orderItem
  },

  computed: {
    // 将获取的数据按照A-Z字母开头排序
    sortgroupcity () {
      let sortobj = {}
      return sortobj
    }
  },
  methods: {
    navToHello () {
      this.navTo('/hello')
    },
    // 切换tab
    changeTab (index) {
      this.selectedIndex = index
      this.getOrderListByStatus()
    },
    async getOrderListByStatus () {
      let {userInfo, selectedIndex} = this
      let oParams = {
        mobile: userInfo.mobile,
        orderStatus: selectedIndex,
        cdkey: this.getCdkey()
      }
      let {result, values = []} = await getOrderListByStatus(oParams)
      if (result !== 1) {
        return false
      }
      this.orderList = values
      console.log('order Result====>', result)
    },
    delSuccess () {
      this.getOrderListByStatus()
    }
  }
}
</script>

<style lang="scss" scoped>
@import "@/style/mixin";
.tab-ct {
  .tab-item {
    border-bottom: 2px solid #757575;
    flex: 1 1 50%;
    height: cmSize(180);
  }
  .sel {
    color: #6cbf73;
    border-color: #6cbf73;
  }
}
  .no-data{
    padding: cmSize(60) 0;
    text-align: center;
    margin: 0 auto;
    width: 100%;
  }

</style>
